<template>
  <view style="display: flex; flex-wrap: wrap">
    <view v-for="(item, index) in imgsList()" :key="index" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
      <image :src="item" class="imageitem" mode="aspectFill"></image>
      <view class="del" @click="delimage(index)">
        <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
      </view>
    </view>
    <view class="upload" @click="openablum" v-if="uploadvisable">
      <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
      <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'upload',
  props: ['coverimglength', 'swiperimgcount', 'weixinimg', 'weixingrounp', 'image'],
  data() {
    return {
      imageList: [],
      uploadvisable: true
    };
  },
  onLoad() {},
  methods: {
    imgsList() {
      let aa = this.aa;
      let image = this.image;
      let imgs = '';

      if (aa(image) == 'string' && image != '' && !image.split(',')) {
        imgs = image.split(' ');
      } else if (aa(image) == 'object') {
        imgs = image;
      } else if (aa(image) == 'string' && image != '' && image.split(',')) {
        imgs = image.split(',');
      } else {
        imgs = this.imageList;
      }

      return imgs;
    },
    aa(e) {
      return typeof e;
    },
    // 打开相册
    openablum() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          // 选择玩之后调用上传图片方法
          uni.showLoading({
            title: '正在上传图片'
          });
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res2) => {
              console.log('上传完成时的回调---', JSON.parse(res2.data));
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                console.log('数据回显查看数组的长度----this.imageList--', this.imageList);
                this.imageList.push(data.data.fullurl);
                // 上传封面
                this.$emit('recivecoverimage', this.imageList);
                // 上传图片
                this.$emit('revivebannerimg', this.imageList);
                // 微信二维码
                this.$emit('weixincode', this.imageList);
                // 群微信二维码
                this.$emit('groupweixincode', this.imageList);
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    // 删除图片
    delimage(index) {
      console.log(index);
      console.log('删除前===的------', this.imageList);
      this.imageList.splice(index, 1);
      console.log('删除后的------', this.imageList);
      // 上传封面
      this.$emit('recivecoverimage', this.imageList);
      // 上传图片
      this.$emit('revivebannerimg', this.imageList);
      // 微信二维码
      this.$emit('weixincode', this.imageList);
      // 群微信二维码
      this.$emit('groupweixincode', this.imageList);
      if (this.imageList.length == 0) {
        this.uploadvisable = true;
      }
    }
  },
  watch: {
    coverimglength: {
      handler(newvalue, oldvalue) {
        if (newvalue >= 1) {
          this.uploadvisable = false;
        }
      }
    },
    swiperimgcount: {
      handler(newvalue, oldvalue) {
        if (newvalue >= 5) {
          this.uploadvisable = false;
        }
      }
    },
    weixinimg: {
      handler(newvalue, oldvalue) {
        if (newvalue >= 1) {
          this.uploadvisable = false;
        }
      }
    },
    weixingrounp: {
      handler(newvalue, oldvalue) {
        if (newvalue >= 1) {
          this.uploadvisable = false;
        }
      }
    }
  }
};
</script>

<style lang="less">
.upload {
  box-sizing: border-box;
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 30rpx;
}
.imageitem {
  box-sizing: border-box;
  width: 160rpx;
  height: 160rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.del {
  box-sizing: border-box;
  position: absolute;
  right: 15rpx;
  top: -15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background-color: red;
}
</style>
